<!DOCTYPE html>
<!--解决idea thymeleaf 表达式模板报红波浪线-->
<!--suppress ALL -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>XXX系统</title>
    <!-- 引入静态资源 -->
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" type="text/css"/>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">

    <!-- 头部区域（可配合layui已有的水平导航） -->
    <div class="layui-header">
        <div class="layui-logo">XXX系统</div>
        <ul class="layui-nav layui-layout-left">
            <!-- 动态读取加载用户快捷菜单 -->
            <div th:each="menu,iterStat : ${shortcutMenuList}">
                <li class="layui-nav-item" th:unless="${#lists.size(menu.sysShortcutMenuVos)} eq 0">
                    <a th:text="${menu.shortcutMenuName}" href="javascript:;">XXX</a>
                    <dl class="layui-nav-child" th:each="childMenu,iterStat : ${menu.sysShortcutMenuVos}">
                        <dd><a class="huanzi-menu" th:data-url="${childMenu.shortcutMenuPath}" th:data-id="${childMenu.shortcutMenuId}" th:text="${childMenu.shortcutMenuName}" href="javascript:;">XXX</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item" th:if="${#lists.size(menu.sysShortcutMenuVos)} eq 0">
                    <a class="huanzi-menu" th:data-url="${menu.shortcutMenuPath}" th:data-id="${menu.shortcutMenuId}" th:text="${menu.shortcutMenuName}" href="javascript:;">XXX</a>
                </li>
            </div>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="https://avatar.gitee.com/uploads/0/5137900_huanzi-qch.png!avatar100?1562729811"
                         class="layui-nav-img">
                    <span th:text="${loginUser.userName}">XXX</span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a class="huanzi-menu" href="javascript:;">基本资料</a></dd>
                    <dd><a class="huanzi-menu" href="javascript:;">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a th:href="@{/logout}">退出</a></li>
        </ul>
    </div>

    <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <!-- 动态读取加载系统菜单 -->
                <div th:each="menu,iterStat : ${menuList}">
                    <li class="layui-nav-item" th:unless="${#lists.size(menu.sysMenuVos)} eq 0">
                        <a th:text="${menu.menuName}" href="javascript:;">XXX</a>
                        <dl class="layui-nav-child" th:each="childMenu,iterStat : ${menu.sysMenuVos}">
                            <dd><a class="huanzi-menu" th:data-url="${childMenu.menuPath}" th:data-id="${childMenu.menuId}" th:text="${childMenu.menuName}" href="javascript:;">XXX</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item" th:if="${#lists.size(menu.sysMenuVos)} eq 0">
                        <a class="huanzi-menu" th:data-url="${menu.menuPath}" th:data-id="${menu.menuId}" th:text="${menu.menuName}" href="javascript:;">XXX</a>
                    </li>
                </div>

                <!-- 固定测试菜单 -->
                <li class="layui-nav-item">
                    <a class="huanzi-menu" data-url="http://localhost:10096/admin/test" data-id="ad2" href="javascript:;">main/**路径访问测试</a>
                </li>
                <li class="layui-nav-item">
                    <a class="huanzi-menu" data-url="http://localhost:10096/sysUser/page" data-id="su2" href="javascript:;">现有接口测试:获取用户</a>
                </li>
            </ul>
        </div>
    </div>

    <!-- 内容主体区域 -->
    <div class="layui-body" style="overflow-y: hidden;">
        <!--   动态选项卡   -->
        <div class="layui-tab" lay-filter="demo" lay-allowclose="true">
            <!-- 标题 -->
            <ul class="layui-tab-title">
                <li class="layui-this" lay-id="11">首页显示</li>
            </ul>
            <!-- 内容 -->
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div style="padding: 15px;">
                        欢迎你，<span th:text="${loginUser.userName}"></span>
                        <br/>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部固定区域 -->
    <div class="layui-footer">
        © XXX系统
    </div>
</div>
<script th:src="@{/js/jquery.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script>
    layui.use('element', function () {
        var element = layui.element;

        $("body").on("click", ".huanzi-menu", function (e) {
            var url = $(this).data("url");
            var id = $(this).data("id");
            var text = $(this).text();

            //如果不存在
            if ($(".layui-tab-title").find("li[lay-id='" + id + "']").length <= 0) {
                let height = document.documentElement.clientHeight - 160 + "px";
                element.tabAdd('demo', {
                    title: text,
                    content: "<iframe onload='$(this)[0].height = document.documentElement.clientHeight-160' width='100%' height='" + height + "' frameborder='0' scrolling='auto' src=\"" + url + "\"></iframe>",
                    id: id
                });
            }
            element.tabChange('demo', id);
        });
    });
</script>
</body>
</html>